/**
 * Created by ClearLiang on 2019/4/16
 * Function:
 * Desc:
 */
import React, {Component} from 'react';
import {Animated, Easing, StyleSheet, TouchableOpacity} from 'react-native';

export default class Animation_2 extends Component {

    // 初始化state
    constructor(props) {
        super(props);
        this.state = {
            initValue1: new Animated.Value(0),
            initValue2: new Animated.Value(1),
            initValue3: new Animated.ValueXY({x:0,y:0}),
            initValue4: new Animated.Value(0),
            initValue5: new Animated.Value(0),
            isOver: 2,/* 0:结束 1:开始 2:暂停 */
        };
        this.myAnimation = Animated.sequence([
            // 从无到有、从小到大，一个匀渐变过程
            Animated.timing(
                this.state.initValue1,
                {
                    toValue: 20,
                    //easing: Easing.back(),
                    duration: 3000,
                }
            ),
            // 弹簧弹性模型
            Animated.spring(
                this.state.initValue2,
                {
                    toValue: 0.8,
                    friction: 1, // 摩擦力，默认为7.
                    tension: 50, // 张力，默认40。
                }
            ),
            // 位移
            Animated.timing(
                this.state.initValue3,
                {
                    toValue: {x: 0, y: 100},
                    duration: 2000,
                }
            ),
            // 旋转
            Animated.timing(
                this.state.initValue4,
                {
                    toValue: 1,
                    duration: 2000,
                }
            ),
            // 斜切旋转
            Animated.timing(
                this.state.initValue5,
                {
                    toValue: 1,
                    duration: 2000,
                }
            ),
        ]);
    }

    // 加载后
    componentDidMount() {
        this.resetAnimation();

        this.myAnimation.start((result) => {
            if (result.finished) {
                this.resetAnimation();
            } else {
                this.setState({
                    isOver: 2,
                });
            }
        });
    }

    render() {

        return (
            <Animated.Text                           // 使用专门的可动画化的Text组件
                style={{
                    ...this.props.style,
                    fontSize: this.state.initValue1,  // 将透明度指定为动画变量值

                    // 这个是透视的概念，在RN中目前还看不到效果
                    // 透视 {perspective: number}

                    // 旋转 {rotate : string}
                    // 旋转 {rotateX: string}
                    // 旋转 {rotateY: string}
                    // 旋转 {rotateZ: string}

                    // 缩放 {scale : number}
                    // 缩放 {scaleX: number}
                    // 缩放 {scaleY: number}

                    // 位移 {translateX: number}
                    // 位移 {translateY: number}

                    // skewX表示的是以X轴为中心在YZ屏幕中旋转，而skewY表示的是以Y轴为中心在XZ屏幕中旋转。
                    // 斜切 {skewX: string}
                    // 斜切 {skewY: string}

                    transform:[
                        {scale:this.state.initValue2},
                        {translateX: this.state.initValue3.x}, // x轴移动
                        {translateY: this.state.initValue3.y}, // y轴移动
                        {rotateX: this.state.initValue4.interpolate({inputRange:[0,1], outputRange:['0deg','360deg']})},
                        {skewY: this.state.initValue5.interpolate({inputRange:[0,1], outputRange:['0deg','360deg']})},
                    ],

                }}
            >
                {this.props.children}
            </Animated.Text>

        );
    }

    startAnimation() {
        if (this.state.isOver === 2) {
            this.setState({
                isOver: 1,
            });
            this.myAnimation.start((result) => {
                if (result.finished) {
                    this.resetAnimation();
                } else {
                    this.setState({
                        isOver: 2,
                    });
                }
            });
        }
    }

    stopAnimation() {
        this.myAnimation.stop();
    }

    resetAnimation() {
        this.state.initValue1.setValue(0);
        this.state.initValue2.setValue(1.5);
        this.state.initValue3.setValue({x:0,y:0});
        this.state.initValue4.setValue(0);
        this.state.initValue5.setValue(0);

        this.setState({
            isOver: 2,
        });
    }

}

// 构建样式
const styles = StyleSheet.create({});